
<template>
  <transition name="slide">
      <music-list :name="name" :avatar="avatar" :songs="songs"></music-list>
  </transition>
</template>

<script>
import MusicList from 'components/music-list/music-list'
import axios from 'axios'
import {mapGetters} from 'vuex'
import {createSong} from 'common/js/song.js'
import {singerDetail} from 'api/singer.js'
export default {
  components:{
    MusicList
  },
  data () {
    return {
      songs: [],
    }
  },
  computed: {
    name () {
      return this.singer.name
    },
    avatar () {
      if(this.singer.avatar) {
        return this.singer.avatar
      }else{
        return this.singer.picUrl
      }
    },
    ...mapGetters([
      'singer'
    ])
  },
  created () {
    if(this.singer){
      this._getDetail(this.singer.name)
    }
  },
  watch: {
    singer() {
      this._getDetail(this.singer.name)
    }
  },
  methods: {
    _getDetail (name) {
      // 搜索对应歌手歌曲 【网易云音乐】
      singerDetail(name).then(res => {
        console.log('_getDetail',res)
        let rel = []
        let data = res.data.body.result.songs
        data.forEach(item => {
         rel.push(createSong(item))
        })
        this.songs = rel
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
